<template>
  <div>
    <b-card no-body class="border-0" v-show="canShow()">
      <b-tabs>
        <b-tab title="主题信息" :active="type === 'topic'" @click="switchTab('topic')">
          <haier-topic-info></haier-topic-info>
        </b-tab>
        <b-tab title="商品信息" :active="type === 'comm'" @click="switchTab('comm')">
          <haier-commodity-info></haier-commodity-info>
        </b-tab>
      </b-tabs>
    </b-card>
    <router-view></router-view>
  </div>
</template>

<script>
import CommdoityInfo from "./CommodityInfo";
import TopicInfo from "./TopicInfo";

export default {
  data() {
    return {
      type: "topic",
    };
  },
  components: {
    "haier-topic-info": TopicInfo,
    "haier-commodity-info": CommdoityInfo,
  },
  methods: {
    switchTab(type) {
      if (type === this.type) return;
      this.$router.push({
        path: "/commodity",
        query: { type: type }
      });
      this.type = type;
    },
    canShow(){
        return this.$route.path === '/commodity'
    },
  },
  updated(){
      console.log(this.$route)
  }
};
</script>

<style></style>
